<!DOCTYPE html>
<title>Custom Elements: defineElement</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry">
<meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<body>
<script>
// TODO(dominicc): Merge these tests with
// https://github.com/web-platform-tests/wpt/pull/2940

'use strict';

test_with_window((w) => {
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', 42);
  }, 'defining a number "constructor" should throw a TypeError');
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', () => {});
  }, 'defining an arrow function "constructor" should throw a TypeError');
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', { m() {} }.m);
  }, 'defining a concise method "constructor" should throw a TypeError');
}, 'A "constructor" that is not a constructor');

test_with_window((w) => {
  // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
  let invalid_names = [
    'annotation-xml',
    'color-profile',
    'font-face',
    'font-face-src',
    'font-face-uri',
    'font-face-format',
    'font-face-name',
    'missing-glyph',
    'div', 'p',
    'nothtmlbutnohyphen',
    '-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z',
    'intermediate-UPPERCASE-letters',
    'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7',
    'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e',
    'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0',
    'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef',
    'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000)
  ];
  class X extends w.HTMLElement {}
  invalid_names.forEach((name) => {
    assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
      w.customElements.define(name, X);
    })
  });
}, 'Invalid names');

test_with_window((w) => {
  class X extends w.HTMLElement {}
  class Y extends w.HTMLElement {}
  w.customElements.define('a-a', X);
  assert_throws_dom('NotSupportedError', w.DOMException, () => {
    w.customElements.define('a-a', Y);
  }, 'defining an element with a name that is already defined should throw ' +
     'a NotSupportedError');
}, 'Duplicate name');

test_with_window((w) => {
  class Y extends w.HTMLElement {}
  let X = (function () {}).bind({});
  Object.defineProperty(X, 'prototype', {
    get() {
      assert_throws_dom('NotSupportedError', w.DOMException, () => {
        w.customElements.define('a-a', Y);
      }, 'defining an element with a name that is being defined should ' +
         'throw a NotSupportedError');
      return {};
    }
  });
  w.customElements.define('a-a', X);
  assert_equals(w.customElements.get('a-a'), X, 'the first definition should have worked');
}, 'Duplicate name defined recursively');

test_with_window((w) => {
  class X extends w.HTMLElement {}
  w.customElements.define('a-a', X);
  assert_throws_dom('NotSupportedError', w.DOMException, () => {
    w.customElements.define('a-b', X);
  }, 'defining an element with a constructor that is already in the ' +
     'registry should throw a NotSupportedError');
}, 'Reused constructor');

promise_test((t) => {
  return Promise.all([create_window_in_test(t), create_window_in_test(t)])
  .then(([w1, w2]) => {
    class X extends w2.HTMLElement { };
    w1.customElements.define('first-name', X);
    w2.customElements.define('second-name', X);
    assert_equals(
      new X().localName, 'second-name',
      'the current global object should determine which definition is ' +
      'operative; because X extends w2.HTMLElement, w2 is operative');
  });
}, 'HTMLElement constructor looks up definitions in the current global-' +
   'reused constructor');

promise_test((t) => {
  return Promise.all([create_window_in_test(t), create_window_in_test(t)])
  .then(([w1, w2]) => {
    class X extends w2.HTMLElement { };
    w1.customElements.define('x-x', X);
    assert_throws_js(
      w2.TypeError, () => new X(),
      'the current global object (w2) should not find the definition in w1');
  });
}, 'HTMLElement constructor looks up definitions in the current global');

test_with_window((w) => {
  let X = (function () {}).bind({});
  Object.defineProperty(X, 'prototype', {
    get() {
      assert_throws_dom('NotSupportedError', w.DOMException, () => {
        w.customElements.define('second-name', X);
      }, 'defining an element with a constructor that is being defined ' +
         'should throw a NotSupportedError');
      return {};
    }
  });
  w.customElements.define('first-name', X);
  assert_equals(w.customElements.get('first-name'), X, 'the first definition should have worked');
}, 'Reused constructor recursively');

test_with_window((w) => {
  let X = (function () {}).bind({});
  Object.defineProperty(X, 'prototype', {
    get() {
      assert_throws_dom('NotSupportedError', w.DOMException, () => {
        w.customElements.define('second-name', class extends HTMLElement { });
      }, 'defining an element while element definition is running should ' +
         'throw a NotSupportedError');
      return {};
    }
  });
  w.customElements.define('first-name', X);
  assert_equals(w.customElements.get('first-name'), X,
                'the first definition should have worked');
}, 'Define while element definition is running');

promise_test((t) => {
  return Promise.all([create_window_in_test(t), create_window_in_test(t)])
  .then(([w1, w2]) => {
    let X = (function () {}).bind({});
    class Y extends w2.HTMLElement { };
    Object.defineProperty(X, 'prototype', {
      get() {
        w2.customElements.define('second-name', Y);
        return {};
      }
    });
    w1.customElements.define('first-name', X);
    assert_equals(w1.customElements.get('first-name'), X,
                  'the first definition should have worked');
    assert_equals(w2.customElements.get('second-name'), Y,
                  'the second definition should have worked, too');
  });
}, 'Define while element definition is running in a separate registry');

test_with_window((w) => {
  class Y extends w.HTMLElement { };
  class X extends w.HTMLElement {
    constructor() {
      super();
      w.customElements.define('second-name', Y);
    }
  };
  // the element definition flag while first-name is processed should
  // be reset before doing upgrades
  w.customElements.define('first-name', X);
  assert_equals(w.customElements.get('second-name'), Y,
                'the second definition should have worked');
}, 'Element definition flag resets before upgrades',
   '<first-name></first-name>');

test_with_window((w) => {
  assert_throws_js(w.TypeError, () => {
    let not_a_constructor = () => {};
    let invalid_name = 'annotation-xml';
    w.customElements.define(invalid_name, not_a_constructor);
  }, 'defining an element with an invalid name and invalid constructor ' +
     'should throw a TypeError for the constructor and not a SyntaxError');

  class C extends w.HTMLElement {}
  w.customElements.define('a-a', C);
  assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
    let invalid_name = 'annotation-xml';
    let reused_constructor = C;
    w.customElements.define(invalid_name, reused_constructor);
  }, 'defining an element with an invalid name and a reused constructor ' +
     'should throw a SyntaxError for the name and not a NotSupportedError');
}, 'Order of checks');

test_with_window((w) => {
  let doc = w.document;
  doc.body.innerHTML = `
<a-a id="a">
  <p>
    <a-a id="b"></a-a>
    <a-a id="c"></a-a>
  </p>
  <a-a id="d"></a-a>
</a-a>`;
  let invocations = [];
  class C extends w.HTMLElement {
    constructor() {
      super();
      invocations.push(this);
    }
  }
  w.customElements.define('a-a', C);
  assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id),
                      'four elements should have been upgraded in doc order');
}, 'Upgrade: existing elements');

test_with_window((w) => {
  let doc = w.document;
  let a = doc.createElement('a-a');
  doc.body.appendChild(a);
  assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a),
                'the undefined autonomous element should be a HTMLElement');
  let invocations = [];
  class C extends w.HTMLElement {
    constructor() {
      super();
      assert_equals(C.prototype, Object.getPrototypeOf(a),
                    'the HTMLElement constructor should set the prototype ' +
                    'to the defined prototype');
      invocations.push(this);
    }
  }
  w.customElements.define('a-a', C);
  assert_array_equals([a], invocations,
                      'the constructor should have been invoked for the in-' +
                      'document element');
}, 'Upgrade: sets prototype of existing elements');

test_with_window((w) => {
  let doc = w.document;
  var shadow = doc.body.attachShadow({mode: 'open'});
  let a = doc.createElement('a-a');
  shadow.appendChild(a);
  let invocations = [];
  class C extends w.HTMLElement {
    constructor() {
      super();
      invocations.push(this);
    }
  }
  w.customElements.define('a-a', C);
  assert_array_equals([a], invocations,
                      'the constructor should have been invoked once for the ' +
                      'elements in the shadow tree');
}, 'Upgrade: shadow tree');

// Final step in Step 14
// 14. Finally, if the first set of steps threw an exception, then rethrow that exception,
// and terminate this algorithm.
test_with_window((w) => {
  class Y extends w.HTMLElement {}
  let X = (function () {}).bind({});
  let exception = { name: 42 };
  Object.defineProperty(X, 'prototype', {
    get() { throw exception; }
  });
  assert_throws_exactly(exception, () => {
    w.customElements.define('a-a', X);
  }, 'should rethrow constructor exception');
  w.customElements.define('a-a', Y);
  assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');
}, 'If an exception is thrown, rethrow that exception and terminate the algorithm');

// 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
test_with_window((w) => {
  let X = (function () {}).bind({});
  let exception = {name: 'prototype throws' };
  Object.defineProperty(X, 'prototype', {
    get() { throw exception; }
  });
  assert_throws_exactly(exception, () => {
    w.customElements.define('a-a', X);
  }, 'Exception from Get(constructor, prototype) should be rethrown');
}, 'Rethrow any exceptions thrown while getting prototype');

// 14.2 If Type(prototype) is not Object, then throw a TypeError exception.
test_with_window((w) => {
  function F() {}
  F.prototype = 42;
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', F);
  }, 'defining an element with a constructor with a prototype that is not an ' +
     'object should throw a TypeError');
}, 'Retrieved prototype is a non-object');

// 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow any exceptions.
// 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Rethrow any exceptions.
// 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback"). Rethrow any exceptions.
// Note that this test implicitly tests order of callback retrievals.
// Callbacks are defined in reverse order.
let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback'];
function F_for_callbacks_in_reverse() {};
callbacks_in_reverse.forEach((callback) => {
  test_with_window((w) => {
    let exception = { name: callback };
    Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, {
      get() { throw exception; }
    });
    assert_throws_exactly(exception, () => {
      w.customElements.define('a-a', F_for_callbacks_in_reverse);
    }, 'Exception from Get(prototype, callback) should be rethrown');
  }, 'Rethrow any exceptions thrown while retrieving ' + callback);
});

// 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false,
//      then throw a TypeError exception.
// 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCallback) is false,
//      then throw a TypeError exception.
// 14.9. If attributeChangedCallback is not undefined, then
//       1. If IsCallable(attributeChangedCallback) is false, then throw a TypeError exception.
callbacks_in_reverse.forEach((callback) => {
  test_with_window((w) => {
      function F() {}
      Object.defineProperty(F.prototype, callback, {
        get() { return {}; }
      });
      assert_throws_js(w.TypeError, () => {
        w.customElements.define('a-a', F);
      }, 'defining an element with a constructor with a callback that is ' +
       'not undefined and not callable should throw a TypeError');
  }, 'If retrieved callback '+ callback + ' is not undefined and not callable, throw TypeError');
});

// 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes").
//        Rethrow any exceptions.
test_with_window((w) => {
  let exception = { name: 'observedAttributes throws' };
  class X extends w.HTMLElement{
    constructor() { super(); }
    attributeChangedCallback() {}
    static get observedAttributes() { throw exception; }
  }
  assert_throws_exactly(exception, () => {
    w.customElements.define('a-a', X);
  }, 'Exception from Get(constructor, observedAttributes) should be rethrown');
}, 'Rethrow any exceptions thrown while getting observedAttributes');

// 14.9.3 If observedAttributesIterable is not undefined, then set observedAttributes
//        to the result of converting observedAttributesIterable to a sequence<DOMString>.
//        Rethrow any exceptions.
test_with_window((w) => {
  let invocations = [];
  let element = w.document.createElement('a-a');
  element.setAttribute('a', '1');
  element.setAttribute('b', '2');
  element.setAttribute('c', '3');
  let constructor = function () {
    return Reflect.construct(w.HTMLElement, [], constructor);
  };
  constructor.prototype.attributeChangedCallback = function () {
    invocations.push(arguments[0]);
  };
  constructor.observedAttributes = {[Symbol.iterator]:
    function* () {
      yield 'a';
      yield 'c';
    }
  };
  w.customElements.define('a-a', constructor);
  w.document.body.appendChild(element);
  assert_array_equals(invocations, ['a', 'c'], 'attributeChangedCallback should be invoked twice: once for "a" and once for "c"');
}, 'ObservedAttributes are retrieved from iterators');

test_with_window((w) => {
  let constructor = function () {};
  constructor.prototype.attributeChangedCallback = function () { };
  constructor.observedAttributes = {[Symbol.iterator]: 1};
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', constructor);
  }, 'converting value that is not an object should throw TypeError');
}, 'Converting non-object observedAttributes to sequence<DOMString>');

test_with_window((w) => {
  class X extends w.HTMLElement{
    constructor() { super(); }
    attributeChangedCallback() {}
    static get observedAttributes() { return new RegExp(); }
  }
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', X);
  }, 'converting RegExp should throw TypeError');
}, 'Converting regular expression observedAttributes to sequence<DOMString>');

test_with_window((w) => {
  let constructor = function () {};
  constructor.prototype.attributeChangedCallback = function () { };
  constructor.observedAttributes = {};
  assert_throws_js(w.TypeError, () => {
    w.customElements.define('a-a', constructor);
  }, 'If iterator method is undefined, it should throw TypeError');
}, 'Converting observedAttributes without iterator method to sequence<DOMString>');

// 14.9.2 test Get(constructor, observedAttributes) does not throw if
// attributeChangedCallback is undefined.
test_with_window((w) => {
  let observedAttributes_invoked = false;
  let X = (function () {}).bind({});
  Object.defineProperty(X, 'observedAttributes', {
    get() { observedAttributes_invoked = true; }
  });
  assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes) should not be invoked');
}, 'Get(constructor, observedAttributes) should not execute if ' +
   'attributeChangedCallback is undefined');

test_with_window((w) => {
  let attributes = {};
  attributes[Symbol.iterator] = function*() {
    throw new TypeError();
  };
  class X extends w.HTMLElement {
    constructor() { super(); }
    attributeChangedCallback() {}
    static get observedAttributes() {
      return attributes;
    }
  }
  assert_throws_js(TypeError, () => {
    w.customElements.define('x-x', X);
  });
}, 'Throwing an exception in observedAttributes');
</script>
</body>
